<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
const emits = defineEmits(['close'])
const dialogVisible = ref<boolean>(false)
const cancel = () => {
    emits('close')
}
dialogVisible.value = true
</script>
<template>
    <el-dialog class="hot-key-pad" v-model="dialogVisible" @close="cancel" title="快捷键说明">
        <div class="content">
            <p>放弃工具：按下Space空格键</p>
            <p>移动图像：鼠标左键，按下拖拽</p>
            <p>窗宽窗位：鼠标右键，按下拖拽</p>
            <p>缩放图像：鼠标滚轮，按下拖拽</p>
            <p>删除标线：鼠标移到要删除的标线上，按下Delete键</p>
            <p>放大序列为单窗口：在目标序列图像上双击左键，再次双击可返回原窗口</p>
            <p>全屏预览：F11，再次按下退出全屏</p>
        </div>

        <template #footer>
            <el-button @click="cancel" round plain :icon="CloseBold">关闭</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss">
.el-dialog.hot-key-pad {
    background-color: #2d2d30;
    position: relative;
    border: solid 1px #666;

    .el-dialog__body {
        padding: 0 10px;
    }

    .el-dialog__title {
        color: #fff !important;
        font-size: 15px;
    }

    .el-dialog__header {
        height: 60px;
        padding-bottom: 0;
    }

    .el-dialog__wrapper {
        display: table;
    }

    .content {
        width: 100%;
        padding-left: 20px;

        p {
            font-size: 15px;
            color: #ccc;
            &:hover{
                color:#FFF;
            }
        }
    }
}
</style>
<style lang="scss" scoped></style>
